<template>
  <div>
    <el-button @click="setStyle">设置表格样式</el-button>
    <el-table ref="tableRef" :data="tableData" border :key="tableKey">
      <el-table-column type="index"></el-table-column>
      <template v-for="(item, index) in tableStyle" :key="item.id">
        <el-table-column :prop="item.fieldName" :label="item.label" :width="item.width"></el-table-column>
      </template>
      <el-table-column width="auto"></el-table-column>
    </el-table>

    <el-dialog v-model="visible" draggable @closed="handleClosed">
      <style-table></style-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import StyleTable from './StyleTable.vue'
import store from '../store';

const tableData = ref([])
const tableStyle = ref([])
const visible = ref(false)
const tableKey = ref(false)
const tableRef = ref(null)

const refreshData = () => {
  tableData.value = store.state.staff
}

const refreshStyle = () => {
  const styleData = store.state.staffStyle
  styleData.sort((a, b) => {
    return a.seq - b.seq
  })
  tableStyle.value = styleData
}

const setStyle = () => {
  visible.value = true
}

const handleClosed = () => {
  // tableKey.value = !tableKey.value
  refreshStyle()
  console.log('模态窗关闭了，开始刷新表格样式')
  tableStyle.value = store.state.staffStyle
  // tableRef.value.doLayout()
}

refreshStyle()
refreshData()

</script>
<style scoped>

</style>
